<template>
    <div>
        <el-form :model="form" :rules="rules" ref="ruleFormRef">
            <div class="bg">
                <div class="box">
                    <div class="title">基本信息</div>
                    <el-row :gutter="16">
                        <el-col :span="6">
                            <el-form-item label="设备编号" prop="equipmentReq.code">
                                <el-input maxlength="30" v-if="type == 0" v-model="form.equipmentReq.code" />
                                <text v-else>{{ form.equipmentReq.code }}</text>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="设备名称" prop="equipmentReq.name">
                                <el-input maxlength="30" v-model="form.equipmentReq.name" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="设备类型" prop="equipmentReq.type">
                                <el-select v-model="form.equipmentReq.type">
                                    <el-option v-for="item in typeOption" :key="item.value" :label="item.name" :value="parseInt(item.value)" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="所在厂区区域位置" prop="equipmentReq.areaLocation">
                                <el-select v-model="form.equipmentReq.areaLocation">
                                    <el-option v-for="item in areaOption" :key="item.value" :label="item.name" :value="parseInt(item.value)" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="16">
                        <el-col :span="6">
                            <el-form-item label="场内安装位置" prop="equipmentReq.installLocation">
                                <el-select v-model="form.equipmentReq.installLocation">
                                    <el-option v-for="item in locationOption" :key="item.value" :label="item.name" :value="parseInt(item.value)" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="设备管理员" prop="equipmentReq.manager">
                                <el-select v-model="form.equipmentReq.manager">
                                    <el-option v-for="item in managerOption" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled != 0" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="设备投产日期">
                                <el-date-picker style="width: 100%" v-model="form.equipmentReq.commissioningDate" type="date" placeholder="" format="YYYY/MM/DD" value-format="YYYY-MM-DD" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="关联设计图纸资料">
                                <el-select v-model="form.equipmentReq.resourceId">
                                    <el-option v-for="item in fileOption" :key="item.value" :label="item.label" :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
            </div>
            <div class="interval"></div>
            <div class="bg">
                <div class="box">
                    <div class="title">基本参数</div>
                    <el-row :gutter="16">
                        <el-col :span="6">
                            <el-form-item label="设备规格">
                                <el-input maxlength="30" v-model="form.equipmentparameterReq.specification" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="工作级别">
                                <el-input maxlength="30" v-model="form.equipmentparameterReq.level" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="最大抬吊载荷(t)">
                                <el-input maxlength="30" v-model="form.equipmentparameterReq.craneLoadMax" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="抬吊钩距(m)≥">
                                <el-input maxlength="30" v-model="form.equipmentparameterReq.liftHookDistance" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="16">
                        <el-col :span="6">
                            <el-form-item label="最大翻身载荷(t)">
                                <el-input maxlength="30" v-model="form.equipmentparameterReq.rolloverLoadMax" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="跨度(m)">
                                <el-input maxlength="30" v-model="form.equipmentparameterReq.spanBaseDistance" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="基距(m)">
                                <el-input maxlength="30" v-model="form.equipmentparameterReq.baseDistance" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="梁底高度(m)">
                                <el-input maxlength="30" v-model="form.equipmentparameterReq.beamBottomHeight" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="16">
                        <el-col :span="6">
                            <el-form-item label="行走速度(m/min)">
                                <el-input maxlength="30" v-model="form.equipmentparameterReq.speed" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="整机高度(m)">
                                <el-input maxlength="30" v-model="form.equipmentparameterReq.totalHeight" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="刚腿侧行走机构长度(m)">
                                <el-input maxlength="30" v-model="form.equipmentparameterReq.rigidLeg" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="柔腿侧行走机构长度(m)">
                                <el-input maxlength="30" v-model="form.equipmentparameterReq.flexibleLeg" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="轨道型号">
                                <el-input maxlength="30" v-model="form.equipmentparameterReq.trackType" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="轨道轮压(kN)">
                                <el-input maxlength="30" v-model="form.equipmentparameterReq.wheelPressure" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="供电电源">
                                <el-input v-model="form.equipmentparameterReq.supplyVoltage" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="整机自重(t)">
                                <el-input v-model="form.equipmentparameterReq.overallWeight" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
            </div>
            <div class="interval"></div>
            <div class="bg">
                <div class="box">
                    <div class="title">上小车技术参数</div>
                    <el-row :gutter="16">
                        <el-col :span="6">
                            <el-form-item label="起重能力(t)">
                                <el-input maxlength="30" v-model="form.smallcarparameterReq.liftingCapacity" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="起升速度(m/min)">
                                <el-input maxlength="30" v-model="form.smallcarparameterReq.liftingSpeed" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="行走速度(m/min)">
                                <el-input maxlength="30" v-model="form.smallcarparameterReq.carrySpeed" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="起升高度(m)轨上">
                                <el-input maxlength="30" v-model="form.smallcarparameterReq.liftingHeightTop" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="起升高度(m)轨下">
                                <el-input maxlength="30" v-model="form.smallcarparameterReq.liftingHeightUnder" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
            </div>
            <div class="interval"></div>
            <div class="bg">
                <div class="box">
                    <div class="title">下小车技术参数</div>
                    <el-row :gutter="16">
                        <el-col :span="6">
                            <el-form-item label="主钩起重能力(t)">
                                <el-input maxlength="30" v-model="form.belowcarparameterReq.liftingCapacity" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="主钩起升速度(m/min)">
                                <el-input maxlength="30" v-model="form.belowcarparameterReq.liftingSpeed" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="副钩起重能力(t)">
                                <el-input maxlength="30" v-model="form.belowcarparameterReq.hookLiftingCapacity" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="副钩起升速度(m/min)">
                                <el-input maxlength="30" v-model="form.belowcarparameterReq.hookLiftingSpeed" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="16">
                        <el-col :span="6">
                            <el-form-item label="行走速度(m/min)">
                                <el-input maxlength="30" v-model="form.belowcarparameterReq.carrySpeed" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="主钩起升高度(m)轨上">
                                <el-input maxlength="30" v-model="form.belowcarparameterReq.maiHookLiftingHeightTop" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="主钩起升高度(m)轨下">
                                <el-input maxlength="30" v-model="form.belowcarparameterReq.maiHookLiftingHeightUnder" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="副钩起升高度(m)轨上">
                                <el-input maxlength="30" v-model="form.belowcarparameterReq.subhookLiftingHeightTop" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="副钩起升高度(m)轨下">
                                <el-input maxlength="30" v-model="form.belowcarparameterReq.subhookLiftingHeightUnder" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
            </div>
            <div class="interval"></div>
            <div class="bg">
                <div class="box">
                    <div class="title">维修吊技术参数</div>
                    <el-row :gutter="16">
                        <el-col :span="6">
                            <el-form-item label="工作级别">
                                <el-input maxlength="30" v-model="form.maintenancecraneReq.workLevel" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="自重(t)">
                                <el-input maxlength="30" v-model="form.maintenancecraneReq.deadLoad" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="16">
                        <el-col :span="6">
                            <el-form-item label="起重量(t)">
                                <el-input maxlength="30" v-model="form.maintenancecraneReq.liftingWeight" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="幅度(m)">
                                <el-input maxlength="30" v-model="form.maintenancecraneReq.amplitude" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="起升高度(m)">
                                <el-input maxlength="30" v-model="form.maintenancecraneReq.liftHeight" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="起升速度(m/min)">
                                <el-input maxlength="30" v-model="form.maintenancecraneReq.liftSpeed" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="起重量(t)">
                                <el-input maxlength="30" v-model="form.maintenancecraneReq.liftingWeightMax" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="幅度(m)">
                                <el-input maxlength="30" v-model="form.maintenancecraneReq.amplitudeMax" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="变幅速度(m/min)">
                                <el-input maxlength="30" v-model="form.maintenancecraneReq.derrickingSpeed" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="旋转速度(r.p.m)">
                                <el-input maxlength="30" v-model="form.maintenancecraneReq.rotationSpeed" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
            </div>
            <div class="interval"></div>
            <div class="bg">
                <div class="box">
                    <div class="button">
                        <div class="submit" @click="submit">
                            <text class="submitText">提交</text>
                        </div>
                        <div class="close" @click="close">
                            <text class="closeText">取消</text>
                        </div>
                    </div>
                </div>
            </div>
        </el-form>
    </div>
</template>
<script setup>
import {
    addequipmentmanagement,
    getequipmenttypelist,
    getequipmentarealocationlist,
    getequipmentinstalllocationlist,
    getlistasync,
    getequipmentmanagementdetail,
    editequipmentmanagement,
    getFiles
} from "@/service/api/equipmentManagement.js";
import { ref, computed } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();
const type = computed(() => router.currentRoute.value.query.type);
const id = computed(() => router.currentRoute.value.query.id);
const form = ref({
    belowcarparameterReq: {
        carrySpeed: "",
        liftingCapacity: "",
        liftingSpeed: "",
        hookLiftingCapacity: "",
        hookLiftingSpeed: "",
        maiHookLiftingHeightTop: "",
        maiHookLiftingHeightUnder: "",
        subhookLiftingHeightTop: "",
        subhookLiftingHeightUnder: ""
    },
    equipmentReq: {
        areaLocation: "",
        code: "",
        commissioningDate: "",
        installLocation: "",
        manager: "",
        name: "",
        resourceId: "",
        type: ""
    },
    equipmentparameterReq: {
        baseDistance: "",
        craneLoadMax: "",
        level: "",
        liftHookDistance: "",
        overallWeight: "",
        rolloverLoadMax: "",
        spanBaseDistance: "",
        specification: "",
        speed: "",
        totalHeight: "",
        trackType: "",
        wheelPressure: "",
        beamBottomHeight: "",
        rigidLeg: "",
        flexibleLeg: "",
        supplyVoltage: "",
        overallWeight: ""
    },
    smallcarparameterReq: {
        carrySpeed: "",
        liftingCapacity: "",
        liftingHeight: "",
        carrySpeed: "",
        liftingHeightTop: "",
        liftingHeightUnder: ""
    },
    maintenancecraneReq: {
        workLevel: "",
        deadLoad: "",
        liftingWeight: "",
        amplitude: "",
        liftHeight: "",
        liftSpeed: "",
        liftingWeightMax: "",
        amplitudeMax: "",
        derrickingSpeed: "",
        rotationSpeed: ""
    }
});
const rules = ref({
    equipmentReq: {
        name: [{ required: true, message: "设备名称是必填的", trigger: "blur" }],
        code: [{ required: true, message: "设备编号是必填的", trigger: "blur" }],
        type: [{ required: true, message: "设备类型是必填的", trigger: "change" }],
        areaLocation: [{ required: true, message: "所在厂区区域位置是必填的", trigger: "change" }],
        installLocation: [{ required: true, message: "场内安装位置是必填的", trigger: "change" }],
        manager: [{ required: true, message: "设备管理员是必填的", trigger: "change" }]
    }
});
const ruleFormRef = ref(null);
const typeOption = ref([]);
const areaOption = ref([]);
const locationOption = ref([]);
const managerOption = ref([]);
const fileOption = ref([]);
const equipmentTitleUp = ref("");
const equipmentTitleBelow = ref("");

getequipmenttypelist().then((res) => {
    if (res.code === 200) {
        typeOption.value = res.data;
    }
});
getequipmentarealocationlist().then((res) => {
    if (res.code === 200) {
        areaOption.value = res.data;
    }
});
getequipmentinstalllocationlist().then((res) => {
    if (res.code === 200) {
        locationOption.value = res.data;
    }
});
getlistasync({}).then((res) => {
    if (res.code === 200) {
        managerOption.value = res.data.map((item) => ({ label: item.name, value: item.value, disabled: item.state }));
    }
});
getFiles().then((res) => {
    if (res.code === 200) {
        fileOption.value = res.data.map((item) => ({ label: item.name, value: item.id }));
    }
});
if (id.value) {
    if (id.value != "null") {
        getequipmentmanagementdetail({ id: id.value }).then((res) => {
            if (res.code === 200) {
                form.value = res.data;
            }
        });
    }
}
const submit = () => {
    if (!ruleFormRef.value) return;
    ruleFormRef.value.validate((valid) => {
        if (valid) {
            const loadingInstance = ElLoading.service();
            if (type.value == 0) {
                addequipmentmanagement(form.value)
                    .then((res) => {
                        if (res.code === 200) {
                            ElMessage({
                                message: "添加成功",
                                type: "success"
                            });
                            router.back();
                        }
                        loadingInstance.close();
                    })
                    .catch(() => {
                        loadingInstance.close();
                    });
            } else {
                editequipmentmanagement(form.value)
                    .then((res) => {
                        if (res.code === 200) {
                            ElMessage({
                                message: "修改成功",
                                type: "success"
                            });
                            router.back();
                        }
                        loadingInstance.close();
                    })
                    .catch(() => {
                        loadingInstance.close();
                    });
            }
        }
    });
};
const close = () => {
    router.back();
};
</script>
<style lang="less" scoped>
::v-deep(.el-select) {
    width: 100%;
}
::v-deep(.el-input__wrapper) {
    width: 100%;
    box-sizing: border-box;
}
.interval {
    padding-top: 16px;
}
.button {
    display: flex;
    justify-content: center;
}
.close {
    margin-left: 8px;
    width: 78px;
    height: 30px;
    border: 1px solid #00428e;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.closeText {
    color: #00428e;
    font-size: 14px;
    font-weight: 400;
}
.submit {
    width: 80px;
    height: 32px;
    background: #00428e;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.submitText {
    color: #ffffff;
    font-size: 14px;
    font-weight: 400;
}
.bg {
    background-color: #ffffff;
    .box {
        padding: 16px;
        .title {
            font-size: 16px;
            font-weight: 600;
            color: #1b3646;
            padding-bottom: 16px;
        }
    }
}
</style>
